<script setup lang="ts">
import { ref } from 'vue';

import {
  PlusOutlined,
  SafetyCertificateOutlined,
  StarOutlined,
  UploadOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

const courseTab = ref('official');
const courseModalVisible = ref(false);
const showUploadModal = ref(false);
const selectedCourse = ref<any>(null);

const officialCourses = ref([
  {
    id: 'c-1',
    title: '书法入门',
    description: '学习传统书法，传承家族文化',
    cover: 'https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=400',
    progress: 30,
    students: 156,
    duration: '2小时',
    videoUrl: 'https://example.com/video1.mp4',
    fullDescription: '本课程将教授楷书基础，适合零基础学员',
    chapters: ['笔画练习', '结构布局', '临摹名帖', '创作实践'],
  },
  {
    id: 'c-2',
    title: '家谱编修实务',
    description: '如何编修和维护家族谱系',
    cover: 'https://images.unsplash.com/photo-1506880018603-83d5b814b5a6?w=400',
    progress: 0,
    students: 89,
    duration: '3小时',
    videoUrl: 'https://example.com/video2.mp4',
    fullDescription: '系统讲解家谱编修的方法和注意事项',
    chapters: ['家谱基础', '世系排列', '格式规范', '印刷装帧'],
  },
  {
    id: 'c-3',
    title: '祠堂礼仪',
    description: '祭祖礼仪规范与流程',
    cover: 'https://images.unsplash.com/photo-1528642474498-1af0c17fd8c3?w=400',
    progress: 100,
    students: 234,
    duration: '1.5小时',
    videoUrl: 'https://example.com/video3.mp4',
    fullDescription: '学习传统祭祖礼仪，传承孝道文化',
    chapters: ['准备工作', '祭拜流程', '供品摆放', '礼仪禁忌'],
  },
  {
    id: 'c-4',
    title: '国学经典',
    description: '论语、大学、中庸精讲',
    cover: 'https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=400',
    progress: 15,
    students: 412,
    duration: '5小时',
    videoUrl: 'https://example.com/video4.mp4',
    fullDescription: '国学经典导读，培养家族文化底蕴',
    chapters: ['论语选读', '大学之道', '中庸思想', '儒家文化'],
  },
]);

const familyCourses = ref([
  {
    id: 'fc-1',
    title: '朱氏祖传中医秘方',
    description: '家族世代相传的养生之道',
    author: '朱橚',
    authorAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ZhuSu',
  },
]);

const myLearning = ref([
  {
    id: 'ml-1',
    courseTitle: '祠堂礼仪',
    progress: 100,
    studyTime: 90,
    lastStudyTime: '2025-01-10T14:30:00Z',
    completed: true,
    sbtMinted: true,
  },
  {
    id: 'ml-2',
    courseTitle: '书法入门',
    progress: 30,
    studyTime: 36,
    lastStudyTime: '2025-01-13T10:15:00Z',
    completed: false,
    sbtMinted: false,
  },
]);

function viewCourse(course: any) {
  selectedCourse.value = course;
  courseModalVisible.value = true;
}

function continueLearning(item: any) {
  message.info(`继续学习《${item.courseTitle}》...`);
}

function uploadCourse() {
  message.success('课程上传成功！审核通过后将发布（Mock模式）');
  showUploadModal.value = false;
}

function formatTime(time: string) {
  return dayjs(time).format('YYYY-MM-DD HH:mm');
}
</script>

<template>
  <div class="courses-page">
    <a-card title="🎓 家族课程">
      <a-tabs v-model:active-key="courseTab">
        <a-tab-pane key="official" tab="官方课程">
          <a-row :gutter="16">
            <a-col
              v-for="course in officialCourses"
              :key="course.id"
              :span="6"
              style="margin-bottom: 16px"
            >
              <a-card hoverable @click="viewCourse(course)">
                <template #cover>
                  <img
                    :src="course.cover"
                    :alt="course.title"
                    style="height: 150px; object-fit: cover"
                  />
                </template>
                <a-card-meta
                  :title="course.title"
                  :description="course.description"
                />
                <a-divider style="margin: 12px 0" />
                <a-space direction="vertical" style="width: 100%">
                  <a-progress :percent="course.progress" size="small" />
                  <div class="course-meta">
                    <span>👥 {{ course.students }} 人学习</span>
                    <span>⏱️ {{ course.duration }}</span>
                  </div>
                  <a-button type="primary" block size="small">
                    {{ course.progress > 0 ? '继续学习' : '开始学习' }}
                  </a-button>
                </a-space>
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>

        <a-tab-pane key="family" tab="家族自建">
          <a-button
            type="dashed"
            block
            @click="showUploadModal = true"
            style="margin-bottom: 16px"
          >
            <PlusOutlined /> 上传课程
          </a-button>

          <a-list :data-source="familyCourses">
            <template #renderItem="{ item }">
              <a-list-item>
                <template #actions>
                  <a @click="viewCourse(item)">查看</a>
                  <a>编辑</a>
                  <a>删除</a>
                </template>
                <a-list-item-meta
                  :title="item.title"
                  :description="item.description"
                >
                  <template #avatar>
                    <a-avatar :src="item.authorAvatar" />
                  </template>
                </a-list-item-meta>
                <div>上传者：{{ item.author }}</div>
              </a-list-item>
            </template>
          </a-list>
        </a-tab-pane>

        <a-tab-pane key="my" tab="我的学习">
          <a-list :data-source="myLearning">
            <template #renderItem="{ item }">
              <a-list-item>
                <template #actions>
                  <a @click="continueLearning(item)">继续学习</a>
                </template>
                <a-list-item-meta :title="item.courseTitle">
                  <template #description>
                    <a-progress :percent="item.progress" />
                    <div style="margin-top: 8px">
                      学习时长：{{ item.studyTime }}分钟 | 最后学习：{{
                        formatTime(item.lastStudyTime)
                      }}
                    </div>
                  </template>
                </a-list-item-meta>
                <a-tag v-if="item.completed" color="green">已完成</a-tag>
                <a-tag v-if="item.sbtMinted" color="gold">
                  <SafetyCertificateOutlined /> 已获得学者SBT
                </a-tag>
              </a-list-item>
            </template>
          </a-list>
        </a-tab-pane>
      </a-tabs>
    </a-card>

    <!-- 课程详情Modal -->
    <a-modal
      v-model:open="courseModalVisible"
      :title="selectedCourse?.title"
      width="1000px"
      :footer="null"
    >
      <div v-if="selectedCourse" class="course-detail">
        <a-row :gutter="16">
          <a-col :span="16">
            <div class="video-player">
              <video controls style="width: 100%; border-radius: 8px">
                <source :src="selectedCourse.videoUrl" type="video/mp4" />
              </video>
            </div>
            <h3 style="margin-top: 16px">课程介绍</h3>
            <p>{{ selectedCourse.fullDescription }}</p>
          </a-col>
          <a-col :span="8">
            <h4>课程目录</h4>
            <a-menu mode="inline">
              <a-menu-item
                v-for="(chapter, idx) in selectedCourse.chapters"
                :key="idx"
              >
                {{ idx + 1 }}. {{ chapter }}
              </a-menu-item>
            </a-menu>

            <a-divider />

            <a-statistic
              title="完成进度"
              :value="selectedCourse.progress"
              suffix="%"
            />
            <a-button type="primary" block style="margin-top: 16px">
              继续学习
            </a-button>
            <a-button block style="margin-top: 8px">
              <StarOutlined /> 收藏课程
            </a-button>
          </a-col>
        </a-row>
      </div>
    </a-modal>

    <!-- 上传课程Modal -->
    <a-modal v-model:open="showUploadModal" title="上传课程" @ok="uploadCourse">
      <a-form layout="vertical">
        <a-form-item label="课程标题">
          <a-input placeholder="输入课程标题" />
        </a-form-item>
        <a-form-item label="课程描述">
          <a-textarea :rows="3" />
        </a-form-item>
        <a-form-item label="上传视频">
          <a-upload list-type="picture" :max-count="1">
            <a-button> <UploadOutlined /> 选择视频文件 </a-button>
          </a-upload>
        </a-form-item>
        <a-form-item label="观看权限">
          <a-radio-group>
            <a-radio value="public">公开</a-radio>
            <a-radio value="family">家族成员</a-radio>
            <a-radio value="vip">会员专享</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped lang="scss">
.courses-page {
  .course-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
  }

  .course-detail {
    .video-player {
      background: #000;
      border-radius: 8px;
    }

    h3 {
      margin-top: 16px;
      margin-bottom: 8px;
    }

    p {
      line-height: 1.6;
      color: #666;
    }
  }
}
</style>
